<template>
	<view>

		<!--弹出层代码 -->
		<view>
			<!-- 弹出层 -->
			<uni-popup ref="popup" :animation="false">
				<view class="popup-content"
					style="margin-top:-20px;background-color: white;border-radius: 5px; padding: 20px;">
					<view class="popup-date">
						<view class="pop-child-content">
							<textarea placeholder="请输入审批意见" v-model="descText"
								style="padding: 10px;color: #3B4144; border: 1px solid;border-radius: 5px;" />
						</view>
						<!-- 弹出框结束 -->
					</view>
					<!-- 操作按钮 -->
					<view class="button-bottom" style="padding-top: 20px;">
						<view class="popup-btn" style="text-align: center;">
							<button
								style="display: inline-block;margin-right: 10px; line-height: inherit; font-size: 16px; background-color: #349b32; color: #fff;"
								@click="submit(2)">同意</button>
							<button style="display: inline-block; line-height: inherit; font-size: 16px;" type="warn"
								@click="submit(3)">驳回</button>

						</view>
						<view class="popup-btn popup-btn2">

						</view>
					</view>
				</view>
			</uni-popup>

			<uni-popup ref="popupCode" :animation="false">
				<view class="popup-content" style="margin-top:-20px;background-color: white;border-radius: 5px;">
					<view class="popup-date">
						<view class="pop-child-content">
							<image :src="image" style="width: 260px;height: 260px;" />
						</view>
						<!-- 弹出框结束 -->
					</view>
					<!-- 操作按钮 -->
					<view class="button-bottom" style="padding-top: 20px;">
						<view class="popup-btn" style="text-align: right;">
							<button @click="dialogCodeClose"
								style="display: inline-block; font-size: 14px; margin-right: 10px;">返回</button>
						</view>
						<view class="popup-btn popup-btn2">

						</view>
					</view>
				</view>
			</uni-popup>

		</view>


		<view style="margin: 10px;	border: 1px solid #f7f1f1;">
			<view class="uni-flex uni-row" style="border-bottom: 1px solid #f7f1f1;">
				<view class="flex-left">
					<text v-if="orderDetails.orderId"> 申领单号:
						{{orderDetails.orderId.substring(0,8).toUpperCase()}}</text>
				</view>
				<view class="flex-right ">
					<button class="button-yellow">{{stateText}}</button>
				</view>
			</view>
			<view class="uni-flex uni-row">
				<view class="flex-list-item ">
					<text> 申请公司: {{orderDetails.company}}</text>
				</view>
			</view>
			<view class="uni-flex uni-row">
				<view class="flex-list-item ">
					<text> 申请部门: {{orderDetails.department}}</text>
				</view>
			</view>
			<view class="uni-flex uni-row">
				<view class="flex-list-item ">
					<text> 申请事由: {{orderDetails.reason}}</text>
				</view>
			</view>
			<view class="uni-flex uni-row" style="border-top: 1px solid #f7f1f1;">
				<view class="flex-left" style="width: 40%;">
					<text v-if="orderDetails.user"> 申请人: {{orderDetails.user.name}}</text>
				</view>
				<view class="flex-right"
					style="width: 60%;	height: 50px;margin-left: 10px;display: flex;align-items: center;text-align: center;">
					<text> 申请时间: {{orderDetails.createTime}}</text>
				</view>
			</view>
		</view>


		<!-- <view class="uni-flex uni-row row-Color item-border" style="margin: 10px;"
			v-for="item in orderDetails.product ">
			<view class="text uni-flex" style="height: 135px;-webkit-align-items: center;align-items: center;">
				<image class="image" :src="item.image" />
			</view>
			<view class="uni-flex uni-column" style="-webkit-flex: 1;flex: 1;">
				<view class="text"
					style="word-break: break-all; height: 80px;">
					<p class="text-overflow" style="text-align: left;"><span>{{ item.brand + "&nbsp;&nbsp;"}} </span><span>{{item.name}}</span></p>
					<p class="text-overflow" style="text-align: left;">{{item.spec}}</p>
				</view>
				<view class="uni-flex uni-row">
					<view class="text flex--direction"
						style="-webkit-flex: 1;flex: 1;word-break: break-all;height: 40px; text-align: left;">{{item.cabinet}}</view>
				</view>
			</view>
			<view class="text uni-flex" style="height: 135px;align-items: center;">
				<button class="button-blue">数量:{{item.number}}</button>
			</view>
		</view> -->
		<view v-for="item in orderDetails.product" style="margin: 10px; background-color: #fff;">
			<h5 class="title">{{item.position}}</h5>
			<view v-for="org in item.list" style="display: flex; padding: 8px 0;">
				<view style="flex: 1;"><img :src="org.image" alt="" width="50" style="display: block; margin: 0 auto;">
				</view>
				<view style="flex: 3">
					<p class="text-overflow" style="text-align: left;"><span>{{ org.brand + "&nbsp;&nbsp;"}}
						</span><span>{{org.name}}</span></p>
					<p class="text-overflow" style="text-align: left;">{{org.spec}}</p>
				</view>
				<view style="flex: 1">
					<button class="button-blue">数量:{{org.number}}</button>
				</view>
			</view>
		</view>



		<view>
			<view v-if="orderDetails.apply" style="margin-left: 10px;margin-right: 10px;	border: 1px solid #f7f1f1;"
				@click="ShowMessage(orderDetails.apply.reasoon)">
				<view class="uni-flex uni-row" style="border-bottom: 1px solid #f7f1f1;">
					<view class="flex-30">
						<text v-if="orderDetails.apply"> 申请人: {{orderDetails.apply.name}}</text>
					</view>
					<view class="flex-20">
						<uni-icons type="checkbox-filled" size="30" color="rgb(0, 122, 255)" class="color-green"
							style="margin-left: 45rpx;" />
					</view>
					<view class="flex-50">
						<text v-if="orderDetails.apply"> 申请时间: {{orderDetails.apply.time}}</text>
					</view>
				</view>
			</view>
			<view style="display: flex; justify-content:center;width: 100%;margin-top: 10px;">
				<view style="width: 15%;height: 25px;">
					<uni-icons type="arrowthindown" size="30" color="rgb(0, 122, 255)" style="line-height: 15px;" />
				</view>
			</view>
		</view>


		<view v-for="item in orderDetails.work" @click="toggle(item.userId,item.taskId,item.status,item)">
			<view style="margin-left: 10px;margin-right: 10px;	border: 1px solid #f7f1f1;">
				<view class="uni-flex uni-row" style="border-bottom: 1px solid #f7f1f1;">
					<view class="flex-30">
						<text> 审批人: {{item.name}}</text>
					</view>
					<view class="flex-20">
						<uni-icons v-if="userEntity.sid == item.userId" type="help-filled" size="30"
							color="rgb(0, 122, 255)" class="color-yellow" style="margin-left: 45rpx;" />
						<uni-icons v-else-if="item.status < 1 || item.reasoon != ''" type="checkbox-filled" size="30"
							color="rgb(0, 122, 255)" class="color-green" style="margin-left: 45rpx;" />
						<uni-icons v-else type="clear" size="30" color="rgb(0, 122, 255)" class="color-red"
							style="margin-left: 45rpx;" />
					</view>
					<view class="flex-50">
						<text> 审批时间: {{item.time}}</text>
					</view>
				</view>
			</view>
			<view style="display: flex; justify-content:center;width: 100%;margin-top: 10px;">
				<view style="width: 15%;height: 25px;">
					<uni-icons type="arrowthindown" size="30" color="rgb(0, 122, 255)" style="line-height: 15px;" />
				</view>
			</view>
		</view>

		<view>
			<view style="margin-left: 10px;margin-right: 10px;	border: 1px solid #f7f1f1;">
				<view class="uni-flex uni-row" style="border-bottom: 1px solid #f7f1f1;">
					<view class="flex-30">
						<text v-if="orderDetails.apply"> 领货人: {{orderDetails.apply.name}}</text>
					</view>
					<view class="flex-20">
						<uni-icons v-if="stateText == '取货完成'" type="checkbox-filled" size="30" color="rgb(0, 122, 255)"
							class="color-green" style="margin-left: 45rpx;" />
						<uni-icons v-else type="help-filled" size="30" color="rgb(0, 122, 255)" class="color-yellow"
							style="margin-left: 45rpx;" />
					</view>
					<view class="flex-50">
						<text v-if="orderDetails.apply"> 领货时间: {{orderDetails.apply.time}}</text>
					</view>
				</view>
			</view>

		</view>

	</view>

</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import QR from "@/common/wxqrcode.js" // 二维码生成器
	export default {
		name: "baclog-now",
		components: {
			uniPopup
		},
		data() {
			return {
				orderDetails: [],
				userEntity: this.StorageCache('user'),
				taskId: '',
				descText: '',
				status: 0,
				image: '',
				stateText: ''
			}
		},
		onLoad(options) {

			this.checkLogin()
			if (options.state == 1) {
				this.stateText = "待审批";
			}
			if (options.state == 2) {
				this.stateText = "审批中";
			}
			if (options.state == 3) {
				this.stateText = "审批完成";
			}
			if (options.state == 4) {
				this.stateText = "取货完成";
			}



			this.orderDetails = [];
			uni.request({
				url: this.url+'AppOrderDetails',
				header: {
					'content-type': 'application/x-www-form-urlencoded',
				},
				method: 'POST',
				dataType: 'json',
				data: {
					orderId: options.id,

				},
				success: (res) => {

					if (res.statusCode == 200) {

						this.orderDetails = res.data

						var productArr = this.orderDetails.product;
						var obj = {}
						var arr = []
						productArr.forEach(item => {
							if (obj[item.cabinet]) {
								arr.some(org => {
									if (org.position == item.cabinet) {
										org.list.push(item);
										return true
									}
								})
							} else {
								obj[item.cabinet] = item;
								arr.push({
									position: item.cabinet,
									list: [item]
								})
							}
						})
						this.orderDetails.product = arr

					}
				},
				complete: (res) => {

				}
			});


		},
		methods: {
			// 同意或者驳回
			submit(status) {

				if (status == 2) {
					this.descText = this.descText.trim() || '同意'
				} else if (status == 3) {
					this.descText = this.descText.trim() || '不同意'
				}
				uni.request({
					url: this.url+'SuccessWorkFlow',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					dataType: 'json',
					data: {
						sid: this.taskId,
						desc: this.descText,
						attachment: '',
						status: status
					},
					success: (res) => {

						if (res.statusCode == 200) {

							location.reload()
						
						}
					},
					complete: (res) => {
			
					}
				});
			},
			// 打开基础内容
			toggle(userId, taskId, status, item) {
				
				if (status > 0) {
					if (userId == this.userEntity.sid) {
						this.taskId = taskId
						this.$refs.popup.open()
					} else if (item.reasoon != '') {
						this.ShowMessage(item.reasoon)
					} else {
						uni.showToast({
							title: '非审批人不得操作审批',
							duration: 2000,
							icon: 'none'
						});
					}

				} else {
					uni.showToast({
						title: '当前未到此级审批流程',
						duration: 2000,
						icon: 'none'
					});
				}


			},
			// 对话框取消按钮
			dialogClose() {

				this.$refs.popup.close()
			},
			ShowMessage(title) {
				uni.showToast({
					title: title,
					duration: 2000,
					icon: 'none'
				});

			},
			// 对话框取消按钮
			dialogCodeClose() {

				this.$refs.popupCode.close()
			},
		},
		onNavigationBarButtonTap: function(e) {

			if (this.StorageCache('user').sid != this.orderDetails.apply.userId) {
				uni.showToast({
					title: '您不得查看他人申领单二维码',
					duration: 2000,
					icon: 'none'
				});
				return false;
			}

			if (this.orderDetails.code != undefined) {
				let code = JSON.stringify({
					order: this.orderDetails.code
				});
			
				let img = QR.createQrCodeImg(code, {
					size: parseInt(400) //二维码大小
				})
				this.image = img
				this.$refs.popupCode.open()
			} else {
				uni.showToast({
					title: '当前申领单还不能查看取货二维码',
					duration: 2000,
					icon: 'none'
				});
			}



		},

	}
</script>

<style>
	.image {

		width: 72px;
		height: 72px;
	}

	.flex-left {
		width: 60%;
		height: 50px;
		margin-left: 10px;
		display: flex;
		align-items: center;
		text-align: center;
	}

	.flex-right {
		width: 40%;
		text-align: center;

	}




	.flex-item {
		margin: 10px;
		width: 33.3%;
		text-align: center;
		line-height: 100rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

	}

	.flex-list-item {
		margin: 10px;
		width: 100%;
		text-align: start;
		line-height: 15rpx;
		display: flex;
		flex-direction: row;

		color: #7f7c7c;

	}


	.uni-row {
		background-color: #FFFFFF;
	}

	.button-blue {
		border: 1px solid #539ce2;
		color: #539ce2;
		margin: 5px 5px 0 0;
		/* padding: 5px; */
		font-size: 10px;
	}

	.button-yellow {
		background-color: #FFFFFF;
		border: 1px solid #F0AD4E;
		color: #F0AD4E;
		margin: 5px;
		padding: 0px;
		font-size: 10px;
	}


	.row-Color {
		background-color: white;

	}

	.item-border {
		border: 1px solid #f7f1f1;

	}

	.text {
		/* margin: 15rpx 10rpx; */
		padding: 0 20rpx;
		/* background-color: #ebebeb; */
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #777;
		font-size: 26rpx;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}

	.flex-30 {
		width: 30%;
		height: 50px;
		margin-left: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 15px;
		color: rgb(153, 153, 153);
	}

	.flex-20 {
		width: 40%;
		text-align: center;

	}

	.flex-50 {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 1px;
		color: rgb(153, 153, 153);
	}

	.text-overflow {
		display: block;
		width: 100%;
		word-break: keep-all;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 12px;
	}

	.title {
		padding: 10px 0 10px 10px;
		font-size: 15px;
		border-bottom: 1px solid #f1f1f1;
	}

	.color-yellow {
		color: #f4ea2a !important;
	}

	.color-red {
		color: #d81e06 !important;
	}

	.color-green {
		color: rgb(52 155 50) !important;
	}
</style>
